<template>
    <section>
        <b-field grouped group-multiline>
            <b-select v-model="defaultSortDirection">
                <option value="asc">Default sort direction: ASC</option>
                <option value="desc">Default sort direction: DESC</option>
            </b-select>
            <b-select v-model="perPage" :disabled="!isPaginated">
                <option value="5">5 per page</option>
                <option value="10">10 per page</option>
                <option value="15">15 per page</option>
                <option value="20">20 per page</option>
            </b-select>
            <div class="control">
                <b-button
                    label="Set page to 2"
                    :disabled="!isPaginated"
                    @click="currentPage = 2"
                />
            </div>
            <div class="control is-flex">
                <b-switch v-model="isPaginated">Paginated</b-switch>
            </div>
            <div class="control is-flex">
                <b-switch v-model="isPaginationSimple" :disabled="!isPaginated"
                    >Simple pagination</b-switch
                >
            </div>
            <div class="control is-flex">
                <b-switch v-model="isPaginationRounded" :disabled="!isPaginated"
                    >Rounded pagination</b-switch
                >
            </div>
            <b-select v-model="paginationPosition" :disabled="!isPaginated">
                <option value="bottom">bottom pagination</option>
                <option value="top">top pagination</option>
                <option value="both">both</option>
            </b-select>
            <b-select v-model="sortIcon">
                <option value="arrow-up">Arrow sort icon</option>
                <option value="menu-up">Caret sort icon</option>
                <option value="chevron-up">Chevron sort icon</option>
            </b-select>
            <b-select v-model="sortIconSize">
                <option value="is-small">Small sort icon</option>
                <option value="">Regular sort icon</option>
                <option value="is-medium">Medium sort icon</option>
                <option value="is-large">Large sort icon</option>
            </b-select>
            <b-select v-model="paginationOrder">
                <option value="">default pagination order</option>
                <option value="is-centered">
                    is-centered pagination order
                </option>
                <option value="is-right">is-right pagination order</option>
            </b-select>
            <div class="control is-flex">
                <b-switch v-model="hasInput">Input</b-switch>
            </div>
            <b-select v-model="inputPosition">
                <option value="">default input position</option>
                <option value="is-input-right">is-input-right</option>
                <option value="is-input-left">is-input-left</option>
            </b-select>
            <b-input
                type="number"
                placeholder="debounce (milliseconds)"
                v-model="inputDebounce"
                min="0"
            ></b-input>
        </b-field>

        <b-table
            :data="data"
            :paginated="isPaginated"
            :per-page="perPage"
            v-model:current-page="currentPage"
            :pagination-simple="isPaginationSimple"
            :pagination-position="paginationPosition"
            :default-sort-direction="defaultSortDirection"
            :pagination-rounded="isPaginationRounded"
            :sort-icon="sortIcon"
            :sort-icon-size="sortIconSize"
            default-sort="user.first_name"
            aria-next-label="Next page"
            aria-previous-label="Previous page"
            aria-page-label="Page"
            aria-current-label="Current page"
            :page-input="hasInput"
            :pagination-order="paginationOrder"
            :page-input-position="inputPosition"
            :debounce-page-input="inputDebounce"
        >
            <b-table-column
                field="id"
                label="ID"
                width="40"
                sortable
                numeric
                v-slot="props"
            >
                {{ props.row.id }}
            </b-table-column>

            <b-table-column
                field="user.first_name"
                label="First Name"
                sortable
                v-slot="props"
            >
                {{ props.row.user.first_name }}
            </b-table-column>

            <b-table-column
                field="user.last_name"
                label="Last Name"
                sortable
                v-slot="props"
            >
                {{ props.row.user.last_name }}
            </b-table-column>

            <b-table-column
                field="date"
                label="Date"
                sortable
                centered
                v-slot="props"
            >
                <span class="tag is-success">
                    {{ new Date(props.row.date).toLocaleDateString() }}
                </span>
            </b-table-column>

            <b-table-column label="Gender" v-slot="props">
                <span>
                    <b-icon
                        pack="fas"
                        :icon="props.row.gender === 'Male' ? 'mars' : 'venus'"
                    >
                    </b-icon>
                    {{ props.row.gender }}
                </span>
            </b-table-column>
        </b-table>
    </section>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
    BButton,
    BField,
    BIcon,
    BInput,
    BSelect,
    BSwitch,
    BTable,
    BTableColumn,
} from "buefy";
import data from "@/data/sample.json";

export default defineComponent({
    components: {
        BButton,
        BField,
        BIcon,
        BInput,
        BSelect,
        BSwitch,
        BTable,
        BTableColumn,
    },
    data() {
        return {
            data,
            isPaginated: true,
            isPaginationSimple: false,
            isPaginationRounded: false,
            paginationPosition: "bottom",
            defaultSortDirection: "asc",
            sortIcon: "arrow-up",
            sortIconSize: "is-small",
            currentPage: 1,
            perPage: 5,
            hasInput: false,
            paginationOrder: "",
            inputPosition: "",
            inputDebounce: "",
        };
    },
});
</script>
